<!DOCTYPE html>
<html>
{{> head title="工作流"}}
<link rel="stylesheet" href="/static/css/workflow.css">
<script src="/static/js/workflow.js"></script>
<script src="/static/js/type_schema.js"></script>
<body>
    {{> navbar}}
    <div class="container-fluid">
        <div class="operation-area">
            <select class="template-select" id="stage-template">
                <option value="none">-选择阶段模板-</option>
            </select>
            <select class="template-select" id="step-template">
                <option value="none">-选择步骤模板-</option>
            </select>
            <button class="add-button" id="add-button-first">前方+</button>
            <button class="add-button" id="add-button-last">后方+</button>
            <button class="add-button" id="undo-button">撤销</button>
            <button class="add-button" id="clear-button">清空</button>
            <button class="add-button" id="add-workflow-button">添加工作流</button>
            <div class="workflow-name-area">
                <input type="text" class="workflow-name-input" id="workflow-name" placeholder="输入工作流名称">
                <div class="error-message" id="error-workflow-name">请输入工作流名称</div>
            </div>
        </div>
        <div class="input-output-type-area">
            <div class="type-area">
                <input type="text" class="type-input" id="input-itype" placeholder="输入类型">
                <div class="error-message" id="error-itype">类型不合法</div>
            </div>
            <div class="type-label">
                <label>当前输入类型：</label>
                <div id="current-itype-label">无</div>
            </div>
            <div class="task-name-label">
                <label>当前任务：</label>
                <div id="current-task-name">无</div>
            </div>
            <div class="type-label">
                <label>当前输出类型：</label>
                <div id="current-otype-label">无</div>
            </div>
            <div class="type-area">
                <input type="text" class="type-input" id="input-otype" placeholder="输出类型">
                <div class="error-message" id="error-otype">类型不合法</div>
            </div>
        </div>
        <div class="top-half">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
        <div class="bottom-half">
            <div class="workflow-list">
                <!-- 工作流列表将在这里动态显示 -->
            </div>
        </div>
    </div>
    {{> footer}}
</body>
</html>
